<template>
    <product-nav />
    <div
        class="product-index"
        :style="coverimage">
        <ul>
            <router-link
                :to="child.link"
                v-for="child in indexnavs"
                :key="child.title">
                <li>

                    <div class="nav-link"><img
                                              :src="child.icon"
                                              alt=""
                                              srcset="">
                        <span>
                            {{ child.title }}
                        </span>
                    </div>

                    <span class="right-icon">
                        <wp-icon name="a-rightarrow" />
                    </span>
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
import ProductTotalImage from '@/assets/product_1@2x.png';
import RepairQueryImage from '@/assets/product_2@2x.png';
import RepairRequsetImage from '@/assets/product_3@2x.png';

import ProductNav from './common/ProductNav.vue';
import WpIcon from '../_wp_components/WpIcon.vue';
import DefaultCoverImage from '@/assets/loginimg@2x.png';

export default {
    components: {
        ProductNav,
        WpIcon
    },
    computed: {
        coverimage () {
            const coverimg = this.$store.state.content_config?.pccoverimg?.url;

            return coverimg ? { backgroundImage: `url(${coverimg})` } : { backgroundImage: `url(${DefaultCoverImage})` };
        }
    },
    data () {
        return {
            indexnavs: [{
                icon: ProductTotalImage,
                title: this.$t('chan-pin-zong-lan'),
                link: '/productlist'
            }, {
                icon: RepairQueryImage,
                title: this.$t('bao-xiu-cha-xun'),
                link: '/repairorderquery'
            }, {
                icon: RepairRequsetImage,
                title: this.$t('wo-yao-bao-xiu'),
                link: '/createrepairorder'
            }]
        };
    }
};

</script>

<style lang="scss" scoped>
    .product-index {
        width: 100%;
        height: 100%;
        padding-top: 150px;
        box-sizing: border-box;
        background-size: 100% 100%;
        background-clip: padding-box;
        background-repeat: no-repeat;
        // background-image: url("../../assets/loginimg@2x.png");

        ul {
            padding-top:130px a {
                color: #000;
            }
        }

        a {
            color: #000;
            text-decoration: none;
        }

        li {
            height: 90px;
            font-size: 17px;
            background: #fff;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .nav-link {
                display: flex;
                align-items: center;
            }

            img {
                width: 64px;
                margin: 0 20px;
                height: 64px;
            }

            margin: 20px 30px;
        }
    }

</style>
